<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        
            回调地狱的 终极解决方案 
            关键字
             async --异步  
             await --等待-异步操作执行完 再往下执行 
                    await promise对象
                     await 后面要跟一个promsie对象，
                     await 会在promise对象变成成功以后，再往下执行
                        await 会返回一个结果，就是 promise对象成功以后的结果

             1- await 只能在 async 修饰的函数内使用
             2- await 后面要跟一个promsie对象，await 会在promise对象变成成功以后，
                再往下执行
       
        好处：相当于 是把 异步代码--改成 同步的代码
             */

        async function box() {
            console.log(11);//同步
            // await 前面的是同步，await以后的是 异步微任务（等同于promise。then）
            let r1 = await new Promise(function (r) {
                setTimeout(() => {
                    console.log('延时器执行完毕2 -绿');
                    r(2000)//成功的结果
                }, 2000);
            })
            console.log(3);
            console.log(r1);

            await new Promise(function (r) {
                setTimeout(() => {
                    console.log('延时器执行完毕2 -黄');
                    r(2000)
                }, 2000);
            })

            await new Promise(function (r) {
                setTimeout(() => {
                    console.log('延时器执行完毕2 -红');
                    r(2000)
                }, 2000);
            })

        }

        box()

        // 同步
        console.log(99999);

    </script>

</body>

</html>